Hi，大家好，我們在之前已經完成了資料的讀取、客服資料的登錄，今天要完成處理流程的登錄機制

功能說明

今天要處理的，是陣列型態的資料，首先我們先完成畫面下方的輸入表單內容

    <div v-if="data.cases.circuits.length > 0">
        <h3>辦理情形</h3>
        <div class="row">
            <div class="col-10"></div>
            <div class="col-2" style="padding: 5px; text-align: right;">
                <button class="btn btn-primary" @click="addData()">新增</button>
            </div>
        </div>
        <div class="row ">
            <div class="col-1 info">序號</div>
            <div class="col-2 info">處理日期</div>
            <div class="col-2 info">處理人員</div>
            <div class="col-4 info">動作</div>
            <div class="col-1 info">狀態</div>
            <div class="col-2 info"></div>
        </div>
        <div class="row " v-for="(item, index) in data.cases.circuits">
            <div class="col-1 info">{{ index + 1 }}</div>
            <div class="col-2 info"><input type="text" v-model="item.flowsdate" /></div>
            <div class="col-2 info"><input type="text" v-model="item.userid" /></div>
            <div class="col-4 info"><input type="text" v-model="item.flowdesc" /></div>
            <div class="col-1 info"><select v-model="item.status">
                    <option v-for="option in options" :value="option.value">
                        {{ option.text }}
                    </option>
                </select></div>
            <div class="col-2 info">
                <button class="btn btn-success" @click="saveData(index)">儲存</button>&nbsp;
                <button class="btn btn-danger" @click="deldata(index)">刪除</button>
            </div>
        </div>
    </div>
    <script>
        const { createApp, onBeforeMount, reactive, ref } = Vue
        const data = reactive(cases = [])
        createApp({
            setup() {
                const options = ref([
                    { text: '處理中', value: '00' },
                    { text: '已完成', value: '10' }
                ])
                onBeforeMount(() => {
                    axios.get("/saf/jsapi/caseinfo/<%=guid %>").then(function (response) {
                        let obj = response.data
                        data.cases = obj

                    }).catch(function (response, b) {
                        alert(response.response.data)
                    })
                })
                return { data, options }
            },
            methods: {
            }
        })
        .mount('#app')
    </script>

要完成新增資料功能，只要將陣列增加一個元素即可

            methods: {
                addData() {
                    console.log(data.cases.circuits.length)
                    data.cases.circuits.push({
                        flowsdate: "",
                        userid: "",
                        flowdesc: ""
                    })
                    console.log(data.cases.circuits.length)
                },
            }

儲存修改或新增的資料時，只要利用傳入之陣列索引，把陣列元素讀出時，傳入後端即可

            methods: {
                saveData(idx) {
                    let yes = confirm("是否存檔呢？")
                    if(!yes) {
                        return false
                    }
                    let obj = data.cases.circuits[idx]
                    axios.post("/saf/mgr/jsapi/saveData/", obj
                    ).then(function (response) {
                        let rt = response.data
                        if (rt.status == "00") {
                            alert("存檔成功")
                        }
                    }).catch(function (response) {
                        alert(response.response.data)
                    })
                },
            }

刪除資料時，只要利用傳入之陣列索引，取出陣列中的唯一值（我是使用flowid），並傳入後端處理即可

            methods: {
                deldata(idx) {
                    let yes = confirm("是否刪除本資料？")
                    if(!yes) {
                        return false
                    }
                    flowid = data.cases.circuits[idx].flowid
                    axios.post("/saf/mgr/jsapi/deldata/" + flowid, {
                    }).then(function (response) {
                        let rt = response.data
                        if (rt.status == "00") {
                            alert("存檔成功")
                        }
                    }).catch(function (response) {
                        alert(response.response.data)
                    })
                }
            }